<template>
	<div class="layui-table-page" v-if="page.totalPage > 1">

		<div class="layui-box layui-laypage layui-laypage-default">

			<a href="javascript:;" class="layui-laypage-prev" :class="page.pageNumber == 1 ? 'layui-disabled' : ''" @tap="switchPage(page.pageNumber-1)">
				<i class="layui-icon layui-icon-left"></i>
			</a>

			<!-- 当前页-->
			<block v-for="( item , index) in page.totalPage" :key="index">
				<span class="layui-laypage-curr" v-if="item == page.pageNumber"><em class="layui-laypage-em"></em><em>{{item}}</em></span>
				<a href="javascript:;" v-else-if="item < 3" @click="switchPage(item)">{{item}}</a>
				<a href="javascript:;" v-else-if="page.pageNumber - item < 4 && page.pageNumber - item > -4" @click="switchPage(item)">{{item}}</a>
				<a href="javascript:;" v-else-if="page.totalPage - item < 3 " @click="switchPage(item)">{{item}}</a>
				<span class="layui-laypage-spr" v-else> … </span>
			</block>

			<a href="javascript:;" class="layui-laypage-next" :class="page.lastPage ? 'layui-disabled' : ''" @tap="switchPage(page.pageNumber+1)">
				<i class="layui-icon layui-icon-right"></i>
			</a>

			<span class="layui-laypage-skip">
				到第
				<input type="number" min="1" :value="inputPage" class="layui-input" @input="inputPageNum">
				页
				<button type="button" class="layui-laypage-btn" @click="switchPage(inputPage)">确定</button>
			</span>
			<span class="layui-laypage-count">共 {{page.totalRow}} 条</span>
			<span class="layui-laypage-limits" v-if="showPageSize">
				<select name="pageSize" v-on:change="changePageSize">
					<option value="index" :selected="page.pageSize == (index+1)" v-for="( item , index) in 9" :key="index">
						{{(index+1)*10}} 条/页
					</option>
				</select>
			</span>
		</div>
	</div>
</template>

<script>
	import kit from "../common/kit.js";
	export default {
		name: "paginate",
		props: {
			page: {
				type: Object,
				default: function(e) {
					return {
						pageNumber: 1,
						lastPage: true,
						totalPage: 1,
						list: [],
						totalRow: 0,
						pageSize: 10
					};
				}
			},
			pageNumber: {
				type: Number,
				default: 3
			}
		},

		data() {
			return {
				inputPage: this.page.pageNumber ,
				showPageSize : false 
			};
		},

		methods: {

			inputPageNum: function(e) {
				this.inputPage = e.detail.value;
			},

			switchPage: function(curPageNum) {
				var pageNum = curPageNum;
				if (pageNum < 1 || pageNum > this.page.totalPage) {
					return false;
				}
				this.$emit("switchPage", pageNum);
			},

			changePageSize: function(e) {
				console.log(e.target.selectedIndex)
				var pageSize = index * 10;
				this.$emit("changePageSize", pageSize);
			},

		}
	}
</script>

<style lang="less" scoped>
	.layui-laypage-btn {
		display: inline-block;
	}

	.layui-laypage-spr+.layui-laypage-spr {
		display: none;
	}

	.layui-input {
		color: #000;
	}

	.layui-form select {
		display: block;
	}
</style>
